<template>
    <div class="my-code">
        <div class="code-input">
            <!--验证码输入框-->
            <el-input class="code-ipt"
                :style="{ '--font': $i18n.locale === 'zh' ? 'IdeaFonts-DianHei-DEJ, IdeaFonts-DianHei' : 'PingFangSC-Regular, PingFang SC' }"
                :class="err_message ? 'isError' : ''" v-model="message" :type="type1" :placeholder="value" :name="name"
                @[rule.trigger]="rules">
            </el-input>
            <!--验证码按钮-->
            <el-button class="miao" @click.prevent="getCode" :disabled="disabled = !show" :loading="loading">
                <span v-show="show">{{ titles }}</span>
                <span v-show="!show" class="count">{{ count }} s</span>
            </el-button>
        </div>
        <div class="error">{{ err_message }}</div>
    </div>

</template>

<script>
import { getPhoneCode, getEmailCode } from "@/request/api"
export default {
    props: {
        mobilePhone: {
            type: [Number, String],
            default: ""
        },
        type1: {
            type: String,
            default: 'text'
        },
        type2: {
            type: String,
            default: 'phone'
        },
        value: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: ''
        },
        rule: {
            type: Object,
            default() {
                return {
                    trigger: 'blur'
                }
            }

        }
    },
    data() {
        return {
            show: true,  // 初始启用按钮
            count: '',   // 初始化次数
            timer: null,
            isSendCode: false,
            title: 0,
            loading: false,
            message: "",
            err_message: ""
        }
    },
    methods: {
        getCode() {
            if (this.mobilePhone) {
                this.loading = true
                if (this.type2 === 'phone') {
                    getPhoneCode({ phone: this.mobilePhone }).then(res => {
                        console.log(res);
                        this.loading = false;
                        this.SendCode()
                    })
                } else if (this.type2 === 'email') {
                    getEmailCode({ email: this.mobilePhone }).then(res => {
                        console.log(res);
                        this.SendCode()
                        this.loading = false
                    })
                }
            } else {
                this.$emit("EmptyPhone", "EmptyPhone")
            }
        },
        SendCode() {
            this.isSendCode = true;
            const TIME_COUNT = 60;
            if (!this.timer) {
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= TIME_COUNT) {
                        this.count--;
                    } else {
                        this.show = true;
                        clearInterval(this.timer);  // 清除定时器
                        this.timer = null;
                        this.title = '1'
                    }
                }, 1000)
            };
        },
        rules() {
            let length = this.message.length
            let { min, max, reg } = this.rule
            let num_turn = 'open'
            let reg_turn = 'open'
            if (this.rule.required === true) { //判断为必填
                // 必传验证,若提示出错关闭字数验证与正则验证
                if (!length) {
                    this.err_message = this.rule.req_message;
                    num_turn = 'off';
                    reg_turn = 'off';

                } else num_turn = 'open'
                if (num_turn === 'open') {
                    if (min || max) {//判断长度
                        // 字数验证，若出错关闭正则验证
                        if (length > max || length < min) {
                            this.err_message = this.rule.num_message;
                            reg_turn = 'off';
                        } else this.err_message = ''
                    }

                }
                if (reg_turn === 'open') {
                    if (reg) { //判断是否匹配
                        // 正则验证
                        if (!reg.test(this.message)) this.err_message = this.rule.reg_message
                        else this.err_message = ''
                    }
                }

            }
        }
    },
    watch: {
        message(newVal, oldVal) {
            this.$emit("message", newVal)
        },
        error(newVal, oldVal) {
            this.err_message = newVal
        }
    },
    computed: {
        titles() {
            let title = this.$t('account.getCode');
            if (this.title === '1') {
                title = this.$t('account.resend');
            } else {
                title = this.$t('account.getCode');
            }
            return title
        }
    },
    beforeDestroy() {
        if (this.timer) {
            clearTimeout(this.timer);
            this.timer = null;
        }
    },

}

</script>

<style lang="less" scoped>
.my-code {
    width: 100%;
}

.code-input {
    display: flex;
    position: relative;

    .code-ipt {
        width: 100%;
        height: 1.6rem;
        background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
        backdrop-filter: blur(10px);
        border-radius: 0.21rem;
    }

    .isError :deep(.el-input__wrapper) {
        border: red 1px solid !important;
    }

    .code-ipt :deep(.el-input__wrapper) {
        padding: 0.37rem 0.43rem !important;
        position: relative;
        background: linear-gradient(315deg, rgba(250, 251, 255, 0.25) 0%, rgba(252, 248, 255, 0.25) 100%);
        box-shadow: none;
        border: none;
        border: 0.03rem solid #C5C5CA;
    }

    .code-ipt :deep(.el-input__suffix) {
        position: absolute;
        right: 1rem;
    }

    .code-ipt :deep(.el-input__inner::placeholder) {
        height: 0.85rem;
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #C5C5CA;
        line-height: 0.85rem;
    }
}

.miao {
    position: absolute;
    right: 0;
    border: none;
    outline: none;
    height: 100%;
    background: none;

    span {
        font-size: 0.53rem;
        font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
        font-weight: normal;
        color: #7709CC;
        line-height: 0.85rem;
    }
}

.error {
    font-size: 0.43rem;
    font-family: 'IdeaFonts-DianHei-CEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #F64F4F;
    line-height: 0.64rem;
}
</style>